<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海量阅读 - 搜索筛选</title>
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* 基础样式 */
        body {
            font-family: "Microsoft YaHei", Georgia, serif;
            background-color: #ffffff;
            color: #e0e0e0;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .navbar {
          background-color: #79bcff;
        }

        .navbar-brand, .nav-link {
          color: rgb(40, 40, 40) !important;
          /* 加粗 */
          font-weight: bold;
        }

        .nav-link:hover {
          color: #3c8dff !important;
        }

        .footer {
            background-color: hsl(216, 100%, 96%);
            color: #424242;
            padding: 2rem 0;
            margin-top: 2rem;
        }


        .search-container {
            background-color:#f5f5f5;
            padding: 1rem 0;
            margin-bottom: 1.2rem;
        }

        .search-box {
            max-width: 500px;
            margin: 0 auto;
        }

        .search-input, .search-btn {
            height: 40px;
            font-size: 15px;
            border: none;
        }

        .search-input {
            border-radius: 20px 0 0 20px;
            padding: 0 15px;
        }

        .search-btn {
            border-radius: 0 20px 20px 0;
            background-color: #4e8ef0;
            color: white;
            padding: 0 20px;
        }

        .search-btn:hover {
            background-color: #4e8ef0;
        }

        /* 筛选区域 */
        .filters-container {
            padding: 0.8rem 0;
            border-bottom: 1px solid #848484;
            margin-bottom: 1.2rem;
        }

        .filter-section {
            margin-bottom: 1rem;
        }

        .filter-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 0.6rem;
            color: #fff;
        }

        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }

        .filter-tag {
            padding: 0.2rem 0.8rem;
            border-radius: 20px;
            background-color: #c6e6f49b;
            color: #454545;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
        }

        .filter-tag:hover, .filter-tag.active {
            background-color: #0d6efd;
            color: white;
        }

        .expand-btn {
            color: #0d6efd;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        /* 书籍展示区域 */
        .books-container {
            margin-bottom: 2rem;
        }

        .book-card {
            background-color: #2d2d2d;
            border-radius: 8px;
            overflow: hidden;
            height: 100%;
            position: relative;
        }

        .book-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

        .book-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
        }

        .book-title {
            font-size: 15px;
            font-weight: bold;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .book-author {
            font-size: 13px;
            color: #ddd;
            margin: 5px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .book-meta {
            font-size: 12px;
            color: #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .book-rating {
            color: #ffd700;
        }

        .badge {
            font-size: 10px;
            padding: 2px 6px;
        }
        * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 确保padding不撑大元素 */
    }

    body {
      font-family: "Microsoft Yahei", sans-serif;
      padding: 20px;
      background-color: #f5f5f5; /* 浅灰背景，提升界面层次感 */
    }

    /* 横向筛选容器：核心flex布局 */
    .filter-container {
      display: flex;
      align-items: center;
      gap: 75px;
      flex-wrap: wrap; /* 屏幕变窄时自动换行，适配手机端 */
      background-color: #f5f5f5;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* 筛选标签样式 */
    .filter-label {
      font-weight: 600; /* 标签加粗，清晰区分 */
      color: #333; /* 深灰色，避免过黑刺眼 */
      font-size: 14px;
    }

    /* 下拉框样式优化 */
    select {
      padding: 8px 30px 8px 12px; /* 上下内边距+右侧留空（放下拉箭头）+左侧内边距 */
      border: 1px solid #e0e0e0; /* 浅灰色边框，比原#ccc更柔和 */
      border-radius: 6px; /* 圆角与容器呼应 */
      font-size: 14px;
      color: #444;
      background-color: #f5f5f5;
      appearance: none; /* 清除默认下拉箭头样式 */
      -webkit-appearance: none; /* 兼容Safari */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23666'%3E%3Cpath d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); /* 自定义下拉箭头（三角形） */
      background-repeat: no-repeat;
      background-position: right 12px center; /* 箭头位置：右侧12px+垂直居中 */
      cursor: pointer; /* 鼠标悬浮变指针，提示可点击 */
      transition: border-color 0.3s; /* 边框颜色过渡，优化交互感 */
    }

    /* 下拉框交互效果 */
    select:focus {
      outline: none; /* 清除默认聚焦外框 */
      border-color: #409eff; /* 聚焦时边框变蓝色，提示当前选中状态 */
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); /* 聚焦时轻微发光，增强视觉反馈 */
    }

    /* 响应式适配：屏幕宽度小于768px时（手机端） */
    @media (max-width: 768px) {
      .filter-container {
        gap: 12px; /* 减小间距，节省空间 */
        padding: 12px 15px;
      }

      select {
        padding: 7px 25px 7px 10px; /* 缩小内边距，适配小屏幕 */
        font-size: 13px;
      }
    }

    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <i class="fas fa-book-reader me-2"></i>海量阅读
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="check.html">搜索筛选</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="login.html">登录注册</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="personal.html">个人中心</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 搜索区域 -->
<div class="search-container">
    <div class="container">
        <div class="search-box d-flex">
            <input type="text" class="search-input flex-grow-1" placeholder="搜索图书、作者、标签...">
            <button class="search-btn"><i class="fas fa-search me-1"></i>搜索</button>
        </div>
    </div>
</div>

<!-- 主内容区 -->
<div class="container">
    <!-- 筛选区域 -->
    <div class="filter-container">
        <!-- 排序筛选 -->
        <div class="filter-group">
            <span class="filter-label">排序：</span>
            <select id="sort-select">
                <option value="hot">最热</option>
                <option value="new">最新上架</option>
                <option value="high-rate">高分好评</option>
            </select>
        </div>

        <!-- 类别筛选 -->
        <div class="filter-group">
            <span class="filter-label">类别：</span>
            <select id="category-select">
                <option value="all">全部</option>
                <option value="novel">小说</option>
                <option value="history">历史</option>
                <option value="philosophy">哲学</option>
                <option value="psychology">心理学</option>
                <option value="science-fiction">科幻</option>
                <option value="popular-science">科普</option>
                <option value="business">商业</option>
                <option value="biography">传记</option>
                <option value="art">艺术</option>
                <option value="education">教育</option>
                <option value="prose">散文</option>
            </select>
        </div>

        <!-- 权益筛选 -->
        <div class="filter-group">
            <span class="filter-label">权益：</span>
            <select id="right-select">
                <option value="all">全部</option>
                <option value="free">免费</option>
                <option value="limited-free">限免</option>
                <option value="member">会员</option>
            </select>
        </div>

        <!-- 地域筛选 -->
        <div class="filter-group">
            <span class="filter-label">地域：</span>
            <select id="region-select">
                <option value="all">全部</option>
                <option value="mainland">中国大陆</option>
                <option value="taiwan">中国台湾</option>
                <option value="hongkong">中国香港</option>
                <option value="usa">美国</option>
                <option value="uk">英国</option>
                <option value="japan">日本</option>
                <option value="other">其他</option>
            </select>
        </div>

        <!-- 时间筛选 -->
        <div class="filter-group">
            <span class="filter-label">时间：</span>
            <select id="time-select">
                <option value="all">全部</option>
                <option value="2023">2023</option>
                <option value="2022">2022</option>
                <option value="2021">2021</option>
                <option value="2020-2016">2020-2016</option>
                <option value="2015-2010">2015-2010</option>
                <option value="earlier">更早</option>
            </select>
        </div>
    </div>



    <!-- 图书展示区域 -->
    <div class="books-container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-4">
            <!-- 图书卡片1 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/ysdy.jpg" alt="《远山淡影》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">远山淡影</div>
                        <div class="book-author">石黑一雄</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 9.2</span>
                            <span class="badge bg-primary">小说</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图书卡片2 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/rljs.jpg" alt="《人类简史》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">人类简史</div>
                        <div class="book-author">尤瓦尔·赫拉利</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 9.0</span>
                            <span class="badge bg-success">科普</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图书卡片3 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/hz.jpg" alt="《活着》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">活着</div>
                        <div class="book-author">余华</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 9.4</span>
                            <span class="badge bg-primary">小说</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图书卡片4 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/skkym.jpg" alt="《思考，快与慢》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">思考，快与慢</div>
                        <div class="book-author">丹尼尔·卡尼曼</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 8.8</span>
                            <span class="badge bg-info">心理学</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图书卡片5 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/st.jpg" alt="《三体》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">三体</div>
                        <div class="book-author">刘慈欣</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 9.1</span>
                            <span class="badge bg-warning">科幻</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图书卡片6 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/bngd.jpg" alt="《百年孤独》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">百年孤独</div>
                        <div class="book-author">加西亚·马尔克斯</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 9.3</span>
                            <span class="badge bg-primary">小说</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图书卡片7-12 结构相同，省略注释 -->
            <div class="col">
                <div class="book-card">
                    <img src="/image/yz.jpg" alt="《原则》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">原则</div>
                        <div class="book-author">瑞·达利欧</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 8.6</span>
                            <span class="badge bg-secondary">商业</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="book-card">
                    <img src="/image/mcnxs.jpg" alt="《明朝那些事儿》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">明朝那些事儿</div>
                        <div class="book-author">当年明月</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 9.5</span>
                            <span class="badge bg-danger">历史</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="book-card">
                    <img src="/image/btydyq.jpg" alt="《被讨厌的勇气》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">被讨厌的勇气</div>
                        <div class="book-author">岸见一郎, 古贺史健</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 8.9</span>
                            <span class="badge bg-info">心理学</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="book-card">
                    <img src="/image/ylylbs.jpg" alt="《月亮与六便士》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">月亮与六便士</div>
                        <div class="book-author">毛姆</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 8.7</span>
                            <span class="badge bg-primary">小说</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="book-card">
                    <img src="/image/int.zfzdr.jpg" alt="《追风筝的人》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">追风筝的人</div>
                        <div class="book-author">卡勒德·胡赛尼</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 8.9</span>
                            <span class="badge bg-primary">小说</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="book-card">
                    <img src="/image/sfdsj.jpg" alt="《苏菲的世界》书籍封面" class="book-img">
                    <div class="book-info">
                        <div class="book-title">苏菲的世界</div>
                        <div class="book-author">乔斯坦·贾德</div>
                        <div class="book-meta">
                            <span class="book-rating"><i class="fas fa-star"></i> 8.5</span>
                            <span class="badge bg-light text-dark">哲学</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer mt-5">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4">
                <h5 class="text-black mb-4">海量阅读</h5>
                <p>提供海量免费图书资源，让阅读无处不在</p>
            </div>
            <div class="col-md-2 mb-4">
                <h5 class="text-black mb-4">关于我们</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">关于海量</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">加入我们</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">联系方式</a></li>
                </ul>
            </div>
            <div class="col-md-2 mb-4">
                <h5 class="text-black mb-4">帮助中心</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">使用帮助</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">常见问题</a></li>
                    <li class="mb-2"><a href="#" class="text-decoration-none text-muted">意见反馈</a></li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <h5 class="text-black mb-4">订阅更新</h5>
                <p class="text-muted">订阅我们的 newsletter，获取最新图书资讯</p>
                <div class="input-group">
                    <label>
                        <input type="email" class="form-control" placeholder="您的邮箱">
                    </label>
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>
        </div>
        <hr class="my-4 bg-secondary">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start">
                <p class="text-muted mb-0">© 2025 海量阅读. 保留所有权利</p>
            </div>
            <div class="col-md-6 text-center text-md-end">
                <div class="d-flex justify-content-md-end justify-content-center gap-3">
                    <a href="#" class="text-muted"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-weixin"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- 引入外部JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const allSelects = document.querySelectorAll('select');
    allSelects.forEach(select => {
      select.addEventListener('change', function () {
        const filterType = this.parentElement.querySelector('.filter-label').textContent.slice(0, -1);
        console.log(`${filterType}选择：`, this.value);
      });
    });
</script>
</body>
</html>
